@import '~styles/vars';
@import '~styles/extendables';
@import '~styles/mixins';

.weather-header {
  @extend %center-x-y;
  display: flex;
  position: absolute;
  top: $toolbar-height;
  z-index: 1;
  width: 100%;
  font-weight: $font-bold;
  color: $color-white;
  text-shadow: 0 0 10px $color-grey-shade-1;
  padding: 0 10px;

  .btn-close {
    @include highlight(35px, 35px, 10px);
    border: 1px solid rgba($color-red, 0.1);
    margin-right: 10px;
  }

  .left,
  .center,
  .right {
    width: 33.3%;
  }

  .center {
    .weather {
      text-align: center;
      min-height: 65px;

      header {
        font-size: 23px;
        margin-bottom: 2px;
      }

      .condition {
        @extend %center-x-y;

        .icon {
          @include icon-shadow($color-grey-shade-1);
          font-size: 14px;
          color: $color-white;
          margin-right: 5px;
        }

        .temperature {
          font-size: 15px;
          padding-bottom: 7px;
        }
      }
    }
  }

  .right {
    text-align: right;
  }
}
